{% extends "base.html" %}
{% load static %}
{% load crispy_forms_tags %}

{% block title %}
    Admin Dashboard | {{ block.super }}
{% endblock title %}

{% block stylesheets %}
    {{ block.super }}
    <link rel="stylesheet" type="text/css" href="{% static "laioffer/css/semantic.min.css" %}">
    <style type="text/css">
    div.added {
        position: relative;
    }
    div.added span.remove {
        font-size: 30px;
        position: absolute;
        right: 5px;
        top: 5px;
    }
    </style>

{% endblock stylesheets %}

{% block content %}
    {% include "_admin_sidebar.html" %}

    <section id="main-content">

        <section class="wrapper">

            <div class="panel panel-default">
                <form method="post" enctype="multipart/form-data" class="form-horizontal">
                    {% csrf_token %}
                    <section class="panel">
                        <div class="panel-heading">
                            Basic Information
                        </div>
                        <div class="panel-body">
                            {% crispy view.user_form view.form_helper %}
                        </div>
                    </section>

                    <section class="panel">
                        <div class="panel-heading">
                            Education
                        </div>
                        <div class="panel-body">
                            {% if view.study_formset %}
                                <div id='study-form-mgmt'>
                                    {{ view.study_formset.management_form }}
                                </div>
                                {% for form in view.study_formset %}
                                    {% if forloop.last %}
                                        <div id="study-form-last" class="well added" data-target-form="study-form">
                                            {% crispy form view.form_helper %}
                                        </div>
                                    {% else %}
                                        <div class="study-form well">
                                            {% crispy form view.form_helper %}
                                        </div>
                                    {% endif %}
                                {% endfor %}
                                <div class="form-group">
                                    <div class="col-lg-2"></div>
                                    <div class="col-lg-6">
                                        <button type="button" class="btn btn-primary btn-add-another"
                                                target-form="study-form">
                                            <span class="glyphicon glyphicon-plus"></span>Add another
                                        </button>
                                    </div>
                                </div>
                            {% endif %}
                        </div>
                    </section>

                    <section class="panel">
                        <div class="panel-heading">
                            Working Experience
                        </div>
                        <div class="panel-body">
                            {% if view.work_formset %}
                                <div id='work-form-mgmt'>
                                    {{ view.work_formset.management_form }}
                                </div>
                                {% for form in view.work_formset %}
                                    {% if forloop.last %}
                                        <div id="work-form-last" class="well added" data-target-form="work-form">
                                            {% crispy form view.form_helper %}
                                        </div>
                                    {% else %}
                                        <div class="work-form well">
                                            {% crispy form view.form_helper %}
                                        </div>
                                    {% endif %}
                                {% endfor %}
                                <div class="form-group">
                                    <div class="col-lg-2"></div>
                                    <div class="col-lg-6">
                                        <button type="button" class="btn btn-primary btn-add-another"
                                                target-form="work-form">
                                            <span class="glyphicon glyphicon-plus"></span>Add another
                                        </button>
                                    </div>
                                </div>
                            {% endif %}
                        </div>
                    </section>

                    <section class="panel">
                        <div class="panel-heading">
                            Upload Resume
                        </div>
                        <div class="panel-body">
                            {% if view.resume_formset %}
                                <div id='resume-form-mgmt'>
                                    {{ view.resume_formset.management_form }}
                                </div>
                                {% for form in view.resume_formset %}
                                    {% if forloop.last %}
                                        <div id="resume-form-last" class="well added" data-target-form="resume-form">
                                            {% crispy form view.form_helper %}
                                        </div>
                                    {% else %}
                                        <div class="resume-form well">
                                            {% crispy form view.form_helper %}
                                        </div>
                                    {% endif %}
                                {% endfor %}
                                <div class="form-group">
                                    <div class="col-lg-2"></div>
                                    <div class="col-lg-6">
                                        <button type="button" class="btn btn-primary btn-add-another"
                                                target-form="resume-form">
                                            <span class="glyphicon glyphicon-plus"></span>Add another
                                        </button>
                                    </div>
                                </div>
                            {% endif %}
                        </div>
                    </section>

                    <div class="form-group">
                        <div class="col-lg-2"></div>
                        <div class="col-lg-6">
                            <button class="btn btn-success " type="submit">{{ view.submit_text }}</button>
                            <a href="javascript:history.back()" class="btn btn-default">Cancel</a>
                        </div>
                    </div>
                </form>


            </div> <!-- /main -->

        </section>

    </section>

{% endblock content %}


{% block javascripts %}
    {{ block.super }}
    <script type="text/javascript" src="{% static "laioffer/js/add_another.js" %}"></script>
    <script type="text/javascript" src="{% static "laioffer/js/semantic.min.js" %}"></script>

    <script type="text/javascript">
        var enrollinggroup = document.getElementById("div_id_enrolling");
        var teachinggroup = document.getElementById("div_id_teaching");
        var selectedgroup = document.getElementById("id_groups");
        var usernamegroup = document.getElementById("div_id_username");

        selectedgroup.onchange = function () {
            var value = selectedgroup.value;

            if (value == 1 || value == 3) {
                enrollinggroup.style.display = "none";
                teachinggroup.style.display = "none";
                usernamegroup.style.display = "block";
            }
            else if (value == 2) {
                enrollinggroup.style.display = "none";
                teachinggroup.style.display = "block";
                usernamegroup.style.display = "block";
            } else {
                teachinggroup.style.display = "none";
                enrollinggroup.style.display = "block";
                usernamegroup.style.display = "none";
            }
        };

        $('select#id_groups').addClass("ui fluid dropdown");
        $('select#id_teaching').addClass("ui fluid dropdown");
        $('select#id_enrolling').addClass("ui fluid dropdown");
        $('select.dropdown').dropdown();

    </script>
{% endblock javascripts %}


